<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #box {
      width: 600px;
      height: 400px;
    }
  </style>
</head>

<body>
  <div id="box"></div>
</body>

</html>
<script src="../node_modules/echarts/dist/echarts.min.js"></script>
<script>
  let charts = echarts.init(document.getElementById('box'));
  let option = {
    xAxis: {
      // show: false,
      // position: 'top',
      // offset: 30,
      name: "事件",
      type: 'category', // 离散型  数据从属性data中获取
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      // nameLocation: 'center',
      // nameGap: 30,
      // nameRotate: 30,
      axisLine: {
        // show: false,
        symbol: 'arrow',
        // symbolSize: [5, 1]
        symbolOffset: [-200, 10],
        lineStyle: {
          // color: 'red',
          // width: 5,
          // type: 'dashed',
          // opacity: 0.5
        }
      },
      axisTick: {
        // show: false
        alignWithLabel: true,
        // length: 20
      },
      axisLabel: {
        // show: false
        rotate: 30,
        align: 'center',
        // verticalAlign: 'bottom'
        margin: 15,
        formatter(value, index) {
          console.log(arguments)
          return value + 'qq'
        }
      },
      splitArea: {
        show: true
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: true
      }
    },
    series: [{
      type: 'line',
      symbolSize: 10,
      lineStyle: {
        color: '#333'
      },
      itemStyle: {
        borderColor: '#333',
        shadowBlur: 20,
        color: {
          type: 'radial',
          x: 0.5,
          y: 0.5,
          r: 0.5,
          colorStops: [{
            offset: 0,
            color: 'red' // 0% 处的颜色
          }, {
            offset: 1,
            color: 'blue' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        }
        // color: {
        //   type: 'linear',
        //   x: 0,
        //   y: 0,
        //   x2: 1,
        //   y2: 0,
        //   colorStops: [{
        //       offset: 0,
        //       color: 'red' // 0% 处的颜色
        //     },
        //     {
        //       offset: 0.5,
        //       color: 'green' // 0% 处的颜色
        //     }, {
        //       offset: 1,
        //       color: 'blue' // 100% 处的颜色
        //     }
        //   ]
        // }
      },
      data: [{
          name: 'A',
          value: 200,
          symbol: 'circle',
          symbolSize: 20,
          label: {
            show: true,
            color: 'red'
          }
        },
        {
          name: 'A1',
          value: 300,
          symbol: 'rect',
          label: {
            show: true,
            color: 'blue'
          }
        },
        {
          name: 'A2',
          value: 400,
          symbol: 'roundRect',
          label: {
            show: true,
            color: 'green'
          }
        },
        {
          name: 'A4',
          value: 230,
          symbol: 'circle',
          label: {
            show: true
          }
        },
        {
          name: 'A5',
          value: 280,
          symbol: 'circle',
          label: {
            show: true
          }
        },
        {
          name: 'A6',
          value: 350,
          symbol: 'circle',
          label: {
            show: true
          }
        },
        {
          name: 'A7',
          value: 600,
          symbol: 'circle',
          label: {
            show: true
          }
        }
      ],
    }]
  };



  charts.setOption(option);
</script>